<template>
  <div class="topBox">
    <div class="L"><a href="index.html">LOGO</a></div>
    <div class="C">
      <div class="saerchbox">
        <input
          name=""
          v-model="search"
          type="text"
          placeholder="请输入您要搜索的内容"
        /><img src="/assets/images/ss.png" @click="toSearch" />
      </div>
    </div>
    <div class="R" @click="showPopup"><img src="/assets/images/tr.png" /></div>
  </div>
  <div class="clear"></div>
  <van-swipe
    class="my-swipe"
    :autoplay="3000"
    indicator-color="white"
    v-if="RecomList.length > 0"
  >
    <van-swipe-item v-for="item in RecomList" :key="item.id">
      <router-link
        :to="{ path: '/product/product/info', query: { proid: item.id } }"
      >
        <img class="imgs" :src="item.cover_cdn" />
      </router-link>
    </van-swipe-item>
  </van-swipe>
  <div class="clear"></div>
  <div class="lqgwBox">
    <ul>
      <li v-for="item in TypeList" :key="item.id">
        <router-link
          :to="{ path: '/product/product/list', query: { typeid: item.id } }"
        >
          <img :src="item.cover_cdn" />
          <p>{{ item.name }}</p>
        </router-link>
      </li>
    </ul>
  </div>
  <div
    style="background-color: #eeeeee"
    v-for="(item, index) in this.productList"
    :key="index"
  >
    <div class="clear"></div>
    <div class="contitbox">
      <p>{{ item.text }}<span>•</span>推荐</p>
    </div>
    <div class="clear"></div>
    <van-grid :gutter="10" :border="true" :column-num="2">
      <van-grid-item
        v-for="items in item.children"
        :key="items.id"
        :to="{ path: '/product/product/info', query: { proid: items.id } }"
      >
        <van-image  fit="cover" :src="items.cover_cdn" />
        <div style="overflow: hidden;width: 130px;text-align: center;font-size: 15px;white-space: nowrap;text-overflow: ellipsis;">{{ items.name }}</div>
        <div style="font-size:15px;color:rgb(206, 149, 51);">￥{{items.price}}</div>
      </van-grid-item>
    </van-grid>
  </div>

  <div class="clear"></div>
  <div class="h54"></div>
  <div class="clear"></div>
  <Tab />
  <van-popup
    v-model:show="show"
    position="right"
    :style="{
      backgroundColor: 'rgb(217, 213, 213)',
      width: '30%',
      height: '100%',
    }"
  >
    <div class="head_img"><img :src="LoginUser.avatar_text" /></div>
    <div class="username">
      {{ LoginUser.nickname ? LoginUser.nickname : "未设置昵称" }}
    </div>
    <div class="phone">{{ LoginUser.mobile_text }}</div>
    <hr />
    <div class="address">地区</div>
    <div class="address">{{ LoginUser.region_text }}</div>
    <hr />
    <div class="money">我的钱包</div>
    <div class="money">{{ LoginUser.money ? LoginUser.money : 0 }}元</div>
    <hr />
    <van-button
      class="MYset"
      color="linear-gradient(to right, #ff6034, #ee0a24)"
      @click="toProfile"
      >个人设置</van-button
    >
  </van-popup>
</template>
<script>
import Tab from "@/components/common/Tab.vue";
import { showNotify } from "vant";
export default {
  components: {
    Tab,
  },
  created() {
    this.getData();
    this.allpro();
    // console.log(this.LoginUser);
  },
  data() {
    return {
      search: "",
      RecomList: [],
      TypeList: [],
      productList: [],
      show: false,
      LoginUser: this.$cookies.get("LoginAuth")
        ? this.$cookies.get("LoginAuth")
        : {},
    };
  },
  methods: {
    async getData() {
      let result = await this.$api.home();

      this.RecomList = result.data.RecomList;
      this.TypeList = result.data.TypeList;
    },
    async allpro() {
      let result = await this.$api.allproduct();
      let proList = result.data;
      let text = [];
      proList.map((item) => {
        if (text.indexOf(item.type.name) === -1) {
          this.productList.push({
            text: item.type.name,
            children: [],
          });
          text.push(item.type.name);
        }
      });
      this.productList.map((item) => {
        proList.map((items) => {
          if (item.text == items.type.name) {
            item.children.push(items);
          }
        });
      });
      this.childrenList = this.productList[0].children;
    },
    toSearch() {
      // console.log(this.search)
      if (!this.search && this.search == "") {
        showNotify({
          message: "搜索内容不能为空",
          duration: 1000,
        });
      } else {
        this.$cookies.set("search", this.search);
        this.$router.push({ path: "/product/product/list" });
      }
    },
    showPopup() {
      this.show = true;
    },
    toProfile() {
      this.$router.push("/user/base/profile");
    },
  },
};
</script>
<style>
.contitbox {
  margin: unset;
  height: 60px;
  padding: 10px 0px;
  box-sizing: border-box;
  background-color: #d20023;
  border: 5px #000 solid;
  margin-top: 0px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-image: url("../assets/images/youpiao.png") 31 round;
}
.contitbox p{
  color: #fff;
}
.imgs {
  /* color: rgb(217, 213, 213); */
  /* height: 250px; */
  object-fit: cover;
  margin-left: 50%;
  transform: translateX(-50%);
}
.head_img {
  width: 60%;
  margin: 20px auto;
  height: 65px;
  border-radius: 80px;
  overflow: hidden;
}
.van-image__img,
.van-image__error,
.van-image__loading {
  margin-left: unset;
}
.username,
.phone,
.address,
.money {
  text-align: center;
}
.MYset {
  margin-top: 10px;
  transform: translateX(15%);
}
.van-grid {
  padding: 10px 0px;
}
.van-grid-item__content {
  /* box-sizing: border-box !important;
  border: 2px !important;
  background:unset !important;
  border-color: #c6c0c0 !important; */
  /* background-color: black !important; */
}
.van-grid-item__content--center {
  /* border: 2px !important; */
  /* background: unset !important; */
  /* border-color: #c6c0c0 !important; */
}
</style>